<template>
  <div class="contribute-container">
    <header class="page-header">
      <h1>贡献指南</h1>
      <p class="subtitle">加入我们，一起构建开发者知识宇宙</p>
    </header>

    <!-- 贡献方式概览 -->
    <div class="contribution-overview">
      <div class="overview-card">
        <div class="card-icon">📝</div>
        <h3>提交示例</h3>
        <p>分享你的技术实现，帮助他人学习</p>
      </div>
      <div class="overview-card">
        <div class="card-icon">🏗️</div>
        <h3>开源项目</h3>
        <p>发布你的开源项目，获得社区反馈</p>
      </div>
      <div class="overview-card">
        <div class="card-icon">📚</div>
        <h3>完善文档</h3>
        <p>优化技术文档，提升内容质量</p>
      </div>
      <div class="overview-card">
        <div class="card-icon">💡</div>
        <h3>问题反馈</h3>
        <p>报告问题或提出建议，促进平台改进</p>
      </div>
    </div>

    <!-- 贡献流程指南 -->
    <div class="guide-section">
      <h2>贡献流程</h2>
      <div class="steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h4>注册账号</h4>
            <p>创建你的开发者账号，完善个人信息</p>
            <button class="btn-action">立即注册</button>
          </div>
        </div>
        <div class="step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h4>选择贡献类型</h4>
            <p>选择你想要的贡献方式，阅读相应的指南文档</p>
            <div class="guide-links">
              <a href="#" class="guide-link">示例贡献指南</a>
              <a href="#" class="guide-link">项目发布指南</a>
              <a href="#" class="guide-link">文档编写规范</a>
            </div>
          </div>
        </div>
        <div class="step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h4>提交内容</h4>
            <p>按照规范提交你的贡献内容</p>
            <button class="btn-action">开始提交</button>
          </div>
        </div>
        <div class="step">
          <div class="step-number">4</div>
          <div class="step-content">
            <h4>审核反馈</h4>
            <p>维护者会对提交内容进行审核，并提供反馈</p>
            <div class="review-status">
              <span class="status">一般在 48 小时内完成审核</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 贡献规范 -->
    <div class="guidelines-section">
      <h2>贡献规范</h2>
      <div class="guidelines-grid">
        <div class="guideline-card">
          <h4>示例代码规范</h4>
          <ul class="guideline-list">
            <li>代码必须可运行，并提供完整依赖</li>
            <li>包含清晰的注释和文档说明</li>
            <li>遵循相应语言的编码规范</li>
            <li>提供测试用例和使用示例</li>
          </ul>
        </div>
        <div class="guideline-card">
          <h4>项目发布规范</h4>
          <ul class="guideline-list">
            <li>项目必须开源，提供明确的许可证</li>
            <li>README 文档完整规范</li>
            <li>提供在线演示或详细截图</li>
            <li>持续维护和及时响应 issue</li>
          </ul>
        </div>
        <div class="guideline-card">
          <h4>文档编写规范</h4>
          <ul class="guideline-list">
            <li>结构清晰，层次分明</li>
            <li>使用 Markdown 格式</li>
            <li>包含必要的图表说明</li>
            <li>定期更新和维护</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 贡献者福利 -->
    <div class="benefits-section">
      <h2>贡献者福利</h2>
      <div class="benefits-grid">
        <div class="benefit-card">
          <div class="benefit-icon">🏆</div>
          <h4>荣誉徽章</h4>
          <p>获得专属贡献者徽章，展示你的影响力</p>
        </div>
        <div class="benefit-card">
          <div class="benefit-icon">🎁</div>
          <h4>周边礼品</h4>
          <p>优质贡献者可获得平台定制周边</p>
        </div>
        <div class="benefit-card">
          <div class="benefit-icon">💎</div>
          <h4>推荐曝光</h4>
          <p>优秀项目将获得首页推荐展示</p>
        </div>
        <div class="benefit-card">
          <div class="benefit-icon">🤝</div>
          <h4>社区影响</h4>
          <p>与其他开发者交流，扩大技术影响力</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.contribute-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 2rem;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.subtitle {
  color: var(--gray-600);
}

.contribution-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.overview-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.overview-card h3 {
  font-size: 1.25rem;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.overview-card p {
  color: var(--gray-600);
  font-size: 0.875rem;
}

.guide-section,
.guidelines-section,
.benefits-section {
  margin-bottom: 3rem;
}

.guide-section h2,
.guidelines-section h2,
.benefits-section h2 {
  font-size: 1.5rem;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.step {
  display: flex;
  gap: 1.5rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.5rem;
}

.step-number {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--primary-50);
  color: var(--primary-600);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.step-content p {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.btn-action {
  padding: 0.5rem 1rem;
  background: var(--primary-600);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action:hover {
  background: var(--primary-700);
}

.guide-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.guide-link {
  color: var(--primary-600);
  text-decoration: none;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.guide-link:hover {
  color: var(--primary-700);
}

.guide-link::after {
  content: '→';
}

.review-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--gray-50);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.guidelines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.guideline-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.5rem;
}

.guideline-card h4 {
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.guideline-list {
  list-style: none;
  padding: 0;
}

.guideline-list li {
  color: var(--gray-600);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
  position: relative;
}

.guideline-list li::before {
  content: '•';
  color: var(--primary-600);
  position: absolute;
  left: 0.5rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.benefit-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.2s;
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.benefit-card h4 {
  font-size: 1.1rem;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.benefit-card p {
  color: var(--gray-600);
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .contribute-container {
    padding: 1rem;
  }
  
  .step {
    flex-direction: column;
    gap: 1rem;
  }
  
  .step-number {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  
  .guide-links {
    flex-direction: column;
  }
  
  .guidelines-grid,
  .benefits-grid {
    grid-template-columns: 1fr;
  }
}
</style> 